---
title: Ręczna instalacja Astro
description: 'Jak zainstalować Astro ręcznie przy użyciu NPM, PNPM lub Yarn.'
i18nReady: true
---
import Button from '~/components/Button.astro'
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


Ten przewodnik przeprowadzi Cię przez kroki niezbędne do ręcznej instalacji i konfiguracji nowego projektu Astro, jeśli wolisz nie używać [automatycznego narzędzia CLI](/pl/install/auto/).


#### Wolisz szybszy sposób na rozpoczęcie pracy?

<Button link="/pl/install/auto/">Spróbuj skorzystać z kreatora astro CLI →</Button>

#### Wymagania

- **Node.js** - `v18.14.1` lub wyższa.
- **Edytor tekstu** - Polecamy [VS Code](https://code.visualstudio.com/) z naszym [Oficjalnym rozszerzeniem Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Terminal** - Dostęp do Astro uzyskuje się poprzez interfejs wiersza poleceń (CLI).

#### Instalacja

Jeśli nie chcesz używać naszego automatycznego narzędzia `create astro` CLI, możesz skonfigurować swój projekt samodzielnie, postępując zgodnie z poniższym przewodnikiem.

## 1. Stwórz swój katalog

Utwórz pusty katalog o nazwie swojego projektu, a następnie przejdź do niego.

```bash
mkdir my-astro-project
cd my-astro-project
```

Kiedy już znajdziesz się w nowym katalogu, utwórz plik projektu `package.json`. W ten sposób będziesz zarządzał dependencjami projektu, w tym Astro. Jeśli nie jesteś zaznajomiony z tym formatem pliku, uruchom następujące polecenie, aby go utworzyć.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init --yes
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm init 
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn init --yes
  ```
  </Fragment>
</PackageManagerTabs>



## 2. Zainstaluj Astro

Najpierw zainstaluj dependencje projektu Astro wewnątrz swojego projektu.

:::note[Important]
Astro musi być zainstalowany lokalnie, nie globalnie. Upewnij się, że *nie* uruchamiasz `npm install -g astro` `pnpm add -g astro` lub `yarn add global astro`.
:::

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add astro
  ```
  </Fragment>
</PackageManagerTabs>

Następnie zastąp placeholder wewnątrz "scripts" w swoim `package.json` następującym kodem:

```json title="package.json" del={2} ins={3-6}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
```

Tych skryptów użyjesz w dalszej części przewodnika, aby uruchomić Astro i wykonać różne polecenia.

## 3. Stwórz swoją pierwszą stronę

W edytorze tekstu utwórz nowy plik w swoim katalogu pod adresem `src/pages/index.astro`. To będzie twoja pierwsza strona Astro w projekcie.

Na potrzeby tego przewodnika, skopiuj i wklej następujący fragment kodu (włączając `---` kreski) do nowego pliku:

```astro title="src/pages/index.astro"
---
// Witamy w Astro! Wszystko pomiędzy tymi potrójnymi kreskami to "frontmatter" twojego komponentu.
// Jego zawartość nigdy nie zostanie wykonana w przeglądarce.
console.log('To wykona się w terminalu, nie w przeglądarce!')
---
<!-- Poniżej znajduje się twój "szablon komponentu". Jest to po prostu HTML, ale z
     odrobiną magii, która pomoże Ci zbudować wspaniałe szablony. -->
<html>
  <body>
    <h1>Witaj, świecie!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>
```

## 4. Utwórz swój pierwszy statyczny zasób

Należy również utworzyć katalog `public/` do przechowywania statycznych zasobów. Astro zawsze będzie dołączać te zasoby do końcowej kompilacji, więc możesz bezpiecznie odwoływać się do nich z wnętrza swoich szablonów komponentów.

W edytorze tekstu utwórz nowy plik w swoim katalogu pod adresem `public/robots.txt`. `robots.txt` jest prostym plikiem, z którego korzysta większość stron, aby powiedzieć botom wyszukiwarek, takim jak Google, jak mają traktować Twoją stronę.

Dla tego przewodnika, skopiuj i wklej następujący fragment kodu do swojego nowego pliku:

```diff title="public/robots.txt"
# Przykład: Zezwól wszystkim botom na skanowanie i indeksowanie Twojej witryny.
# Pełna składnia: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```

## 5. Utwórz `astro.config.mjs`.

Astro jest konfigurowane za pomocą pliku `astro.config.mjs`. Ten plik jest opcjonalny, jeśli nie potrzebujesz konfigurować Astro, ale być może chcesz go teraz stworzyć.

Utwórz `astro.config.mjs` w głównym katalogu swojego projektu i skopiuj do niego poniższy kod:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
```

Jeśli chcesz załączyć [komponenty frameworków UI](/pl/guides/framework-components/) takich jak React, Svelte, itp. lub użyć innych narzędzi takich jak Tailwind czy Partytown w swoim projekcie, to tutaj [ręcznie zaimportujesz i skonfigurujesz integracje](/pl/guides/integrations-guide/).

📚 Zajrzyj do [dokumentacji konfiguracji API](/pl/reference/configuration-reference/), aby uzyskać więcej informacji.

## 6. Dodaj wsparcie dla TypeScript

TypeScript jest konfigurowany za pomocą pliku `tsconfig.json`. Nawet jeśli nie piszesz kodu TypeScript, plik ten jest ważny, aby narzędzia takie jak Astro i VS Code wiedziały jak interpretować Twój projekt. Niektóre funkcje (jak importowanie paczek za pomocą npm) nie są w pełni obsługiwane w edytorze bez pliku `tsconfig.json`. 

Jeśli zamierzasz pisać kod TypeScript, zalecane jest użycie szablonu Astro `strict` lub `strictest`. Możesz zobaczyć i porównać trzy konfiguracje szablonów na stronie [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).

Utwórz `tsconfig.json` w głównym katalogu swojego projektu i skopiuj do niego poniższy kod. (Możesz użyć `base`, `strict` lub `strictest` dla swojego szablonu TypeScript):

```json title="tsconfig.json" "base"
{
  "extends": "astro/tsconfigs/base"
}
```

Na koniec należy stworzyć `src/env.d.ts`, aby TypeScript wiedział o typach środowiska dostępnych w projekcie Astro:

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
```

📚 Przeczytaj [przewodnik po konfiguracji TypeScript](/pl/guides/typescript/#setup), aby uzyskać więcej informacji.

## 7. Następne kroki

Jeśli wykonałeś powyższe kroki, Twój katalog projektu powinien teraz wyglądać tak:

<FileTree>
- node_modules/
- public/
  - robots.txt
- src/
  - pages/
    - index.astro
  - env.d.ts
- astro.config.mjs
- package-lock.json or `yarn.lock`, `pnpm-lock.yaml`, etc.
- package.json
- tsconfig.json
</FileTree>

Gratulacje, jesteś teraz gotowy do korzystania z Astro!

Jeśli podążałeś za tym przewodnikiem, możesz przejść bezpośrednio do [Krok 2: Uruchom Astro](/pl/install/auto/#2-uruchamianie-astro-), aby kontynuować i dowiedzieć się jak uruchomić Astro po raz pierwszy.
